<template>
  <div class="p-5">
    <div class="card-box">
      <SearchView :catelist="comclasslist" />
    </div>
    <div class="card-box box mt-5">
      <a-table :columns="columns" :data-source="data?.items" :pagination="false" :loading="loading">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'avatar'">
            <a-image :width="80" :src="record.avatar" style="border-radius: 80px" />
          </template>
          <template v-if="column.key === 'gender'">
            <a-tag :bordered="false" color="processing">{{ record.gender == 1 ? '男' : record.gender == 2 ? '女' : '未知'
              }}</a-tag>
          </template>
          <template v-if="column.key === 'isDietitian'">
            <a-tag :bordered="false" :color="record.isDietitian ? 'processing' : 'error'">{{ record.isDietitian ? '是' :
              '否'
              }}</a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <a-button type="link" primary @click="editbtn(record)">编辑</a-button>
          </template>
        </template>
      </a-table>
      <PageView :total="newdata.total" v-model:current="newdata.current" v-model:pageSize="newdata.pagesize"
        @change="pagechange" />
    </div>
    <addView v-model:value="newdata.open" type="update" :editdata="newdata.editinfo" :catalist="comclasslist"
      @submit="submit" />

    <dietitianView v-model:value="newdata.selectopen" />
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';

import { DownOutlined } from '@ant-design/icons-vue';

import SearchView from './searchView.vue';

import PageView from '/components/PageView/index.vue';

import { useRequest, createUseRequestComponent } from "vue-hooks-plus";
import addView from './addView.vue'
import { getcomlist } from "#/hooks/common.ts";
import dietitianView from '#/components/dietitianView/index.vue'


import * as api from '#/api/core/user'
const { comclasslist } = getcomlist(12);

interface stateItm {
  selectopen: any,
  open: any;
  editinfo: any;
  query: any,
  current: any,
  pagesize: any,
  total: any
}

const newdata: stateItm = reactive({
  selectopen: false,
  open: false,
  editinfo: {},
  query: {},
  current: 1,
  pagesize: 10,
  total: 0,
});

const router = useRouter();

const columns = [
  {
    title: '头像',
    dataIndex: 'avatar',
    align: 'center',
    key: 'avatar',
  },
  {
    title: '昵称',
    dataIndex: 'nickName',
    align: 'center',
    key: 'nickName',
  },
  {
    title: '性别',
    dataIndex: 'gender',
    align: 'center',
    key: 'gender',
  },
  {
    title: '电话',
    dataIndex: 'mobile',
    align: 'center',
    key: 'mobile',
  },
  {
    title: '是否是营养师',
    dataIndex: 'isDietitian',
    align: 'center',
    key: 'isDietitian',
  },
  {
    title: '创建时间',
    dataIndex: 'creationTime',
    align: 'center',
    key: 'creationTime',
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    key: 'action',
  },
];


const { data, loading, error, run } = useRequest(
  () =>
    api.$getUserlist({
      ...newdata.query,
      SkipCount: (newdata.current - 1) * newdata.pagesize,
      MaxResultCount: newdata.pagesize
    }),
  {
    manual: false, //手动触发

    onSuccess: (result) => {
      console.log("获取会员列表", result, loading.value

      );



      newdata.total = result.totalCount
      // return result.items
      // 此时 data.value 与 result 是一致的
    },
  }
);


const pagechange = () => {
  run()
}






const editbtn = (record: any) => {

  newdata.editinfo = record
  newdata.open = true
}


const submit = () => {
  newdata.current = 1
  run()
}

const query = (e: any) => {
  newdata.query = e
  run()
}

</script>

<style scoped lang="less">
.box {
  min-height: 100px;
  // box-sizing: border-box;
  // padding: 20px;
}
</style>
